import { FC } from "react";
import styles from './styles.module.scss'
import { Breadcrumb } from "antd";
import { Link } from "react-router-dom";
const Order: FC = () => {

    return (
        <div className={styles.order}>
            {/* 面包屑 */}
            <div className={styles.bread}>
                <Breadcrumb
                    items={[
                        {
                            title: <Link to={'/home'}>首页</Link>,
                        },
                        {
                            title: <Link to={`/cartList`} > 购物车</Link>
                        },
                        {
                            title: <span >生成订单</span>
                        },
                    ]}
                />
            </div>
            {/* 生成订单内容 */}
            <div className={styles.orderContent}>
                {/* 收货地址 */}
                <div className={styles.address}>
                    <div className={styles.title}>
                        <span>收货地址</span>
                    </div>
                    <div className={styles.content}>
                        <div className={styles.info}>
                            <div><span>收件人:</span><span>xxx</span></div>
                            <div><span>联系方式:</span><span>xxxxxxx</span></div>
                            <div><span>收货地址:</span><span>xxxxxxxxxxxx</span></div>
                        </div>
                        <button >修改地址</button>
                        <button >切换地址</button>
                        <button >添加地址</button>
                    </div>
                </div>
                {/* 商品信息 */}
                <div className={styles.goods}>
                    <div className={styles.title}>
                        <span>商品信息</span>
                    </div>
                    <div className={styles.content}>
                        {/* 表头 */}
                        <div className={styles.listHeader}>
                            <span>商品信息</span>
                            <span>单价</span>
                            <span>数量</span>
                            <span>小计</span>
                            <span>实付</span>
                        </div>
                        {/* 商品信息 */}
                        <div className={styles.goods} >
                            <div className={styles.goodInfo}>
                                <img />
                                <span>name</span>
                                <span>attrsText</span>
                            </div>
                            <div className={styles.price}>
                                ¥20
                            </div>

                            <div className={styles.count}>
                                3
                            </div>
                            <div className={styles.total}>
                                ¥90
                            </div>
                            <div className={styles.pay}>
                                ¥90
                            </div>

                        </div>

                    </div>
                </div>
                {/* 配送时间 */}
                <div className={styles.deliveryTime}>
                    <div className={styles.title}>
                        <span>配送时间</span>
                    </div>
                    <div className={styles.content}>
                        <button className={styles.active}>不限送货时间：周一至周日</button>
                        <button>工作日送货：周一至周五</button>
                        <button>双休日、假期送货：周六至周日</button>
                    </div>
                </div>
                {/* 支付方式 */}
                <div className={styles.payWay}>
                    <div className={styles.title}>
                        <span>支付方式</span>
                    </div>
                    <div className={styles.content}>
                        <button className={styles.active}>在线付款</button>
                        <button>货到付款<span>(注：需5元手续费)</span></button>

                    </div>
                </div>
                {/* 金额明细 */}
                <div className={styles.money}>
                    <div className={styles.title}>
                        <span>金额明细</span>
                    </div>
                    <div className={styles.content}>
                        <div className={styles.info}>
                            <div><span>商品件数:</span><span>5件</span></div>
                            <div><span>商品总价:</span><span>¥3413.00</span></div>
                            <div><span>运费:</span><span>¥10.00</span></div>
                            <div><span>应付金额:</span><span>¥3423.00</span></div>
                        </div>
                        <button>提交订单</button>
                    </div>

                </div>
            </div>
        </div>
    )
}

export default Order